<template>
  <div class="zc">
    <div class="header">
      <div class="logoTitleSide">
        <img
          src="../img/logo.png"
          class="logoArea"
          alt
          style="width:25px;margin-right:10px;margin-left:8px;"
        >
        <div class="titleArea">
          <a alt href="javascript:;" hidefocus="true">
            <span class="pageTitle">80教育商城</span>
          </a>
        </div>
      </div>
      <div class="toolMenuSide">
        <div class="userEnterAera">
          <span>|</span>
          <a href="javascript:;" hidefocus="true" class="userEnterLink">
            <span class="userEnterText">会员中心</span>
          </a>
        </div>
        <div class="seacherAera">
          <i class="iconfont icon-search"></i>
          <span class="seacherAeraText">搜索</span>
        </div>
      </div>
    </div>
    <div class="content">
      <ul>
        <li>
          <span>账号</span>
          <input type="text" placeholder="请输入账号（必填）" v-model="item.loginName">
        </li>
        <li>
          <span>密码</span>
          <input type="password" placeholder="请输入密码（必填）" v-model="item.loginKey">
        </li>
        <li>
          <span>密码</span>
          <input type="password" placeholder="请确认密码（必填）">
        </li>
        <li>
          <span>姓名</span>
          <input type="text" placeholder="请确认姓名（必填）" v-model="item.name">
        </li>
        <li>
          <span>邮箱</span>
          <input type="text" placeholder="请输入邮箱">
        </li>
        <li>
          <span>电话</span>
          <input type="text" placeholder="请输入电话">
        </li>
        <li>
          <span>手机</span>
          <input type="text" placeholder="请输入手机号">
        </li>
        <li>
          <span>留言</span>
          <input type="text" placeholder="请留言">
        </li>
      </ul>

      <footer @click="reg">注册</footer>
    </div>
  </div>
</template>

<script>
import { createNamespacedHelpers } from "vuex";
const { mapState, mapMutations, mapActions } = createNamespacedHelpers("login");
export default {
  name: "Reg",
  data() {
    return {
      item: {
        loginName: "",
        loginKey: "",
        name: "",
        age:'',
        gender:'男',
        phone:'',
        adress:'',
        status:1,
        type:1
      }
    };
  },
  methods:{
     ...mapActions(["doReg"]),
     reg(){
       console.log(this.item)
       this.doReg(this.item).then(()=>{
         this.$router.push('/login')
       })
     }
  }
};
</script>

<style scoped>
.content {
  background: #fff;
  padding: 17px 23px;
}
.content input {
  height: 40px;
  font-size: 14px;
  width: 80%;
  border: 0;
  border-bottom: 1px solid #ebebeb;
  margin-left: 20px;
  outline: none;
}
.content input:active {
  border-bottom: 1px solid #3285ff;
}
.content ul li {
  margin-top: 3px;
}
.content span {
  font-size: 14px;
  line-height: 3.2;
}
footer {
  width: 100%;
  min-height: 48px;
  background: -webkit-gradient(
    linear,
    left top,
    right top,
    from(#56c4e7),
    to(#3285ff)
  );
  background: linear-gradient(left, #56c4e7, #3285ff);
  background-color: #3285ff;
  font-size: 20px;
  line-height: 48px;
  font-weight: 400;
  text-align: center;
  color: #fff;
  border-radius: 50px;
  margin-top: 10%;
  margin-bottom: 50px;
}
</style>
